<template>
  <div class="page-gird-container">
    <i-crud
      :data="data"
      :columns="columns"
      :page-options="pageOptions"
      :fetch-data="fetchData"
      :options="options"
      :add-form-options="addFormOptions"
      :searchOptions="searchOptions"
      :toolbarOptions="toolbarOptions"
    ></i-crud>
  </div>
</template>

<script>

    import { financialBills } from "@/api/finance";
    import { mapState } from "vuex";
    import appMixins from "@/mixins/app";

    export default {
        name: "finance-moneyManage-detail",
        mixins: [appMixins],
        computed: {
            ...mapState("admin/finance_dict", ["billClassify", "modePayment"]),
            columns() {
                return [
                    {
                        title: "账单号",
                        key: "billnum",
                        type: "Input",
                        width: 0
                    },
                    {
                        title: "订单号",
                        key: "ordernum",
                        width: 0
                    },
                    {
                        title: "账单分类",
                        key: "classify",
                        type: 'Select',
                        dict: {
                            data: this.billClassify
                        },
                        width: 0
                    },
                    {
                        title: "支付方式",
                        key: "mode",
                        componentName: "Select",
                        dict: {
                            data: this.modePayment,
                        },
                        width: 0
                    },
                    {
                        title: "当时余额",
                        key: "balance",
                        width: 0
                    },
                    {
                        title: "发生金额",
                        key: "money",
                        width: 0
                    },
                    {
                        title: "交易日期",
                        key: "create_time",
                        componentName: "DatePicker",
                        search: {
                            component: {
                                valueBinding: "date",
                                name: "DatePicker",
                                type: "daterange",
                            },
                        },
                        width: 0
                    },
                    {
                        title: '说明',
                        key: 'bill_notes',
                        width: 0
                    }
                ]
            }
        },
        data() {
            return {
                pageOptions: {
                    total: 0,
                    pageSize: 20,
                    pageSizeOpts: [20, 50, 100, 200],
                },
                data: [],
                addFormOptions: {
                    show: false,
                },
                options: {
                    border: false, // 是否显示边框
                },
                searchOptions: {
                    labelWidth: 150,
                },
            };
        },
        methods: {
            fetchData({ currentPage, pageSize, sortColumn, sortType, search }) {
                return new Promise((resolve, reject) => {
                    const params = {
                        page: {
                            current: currentPage,
                            size: pageSize,
                        },
                        search,
                    };
                    if (search.date && search.date[0] !== "") {
                        search.date[0] = this.toDate(search.date[0]);
                        search.date[1] = this.toDate(search.date[1]);
                    }
                    if (sortColumn) {
                        params["sort"] = {
                            type: sortType,
                            column: sortColumn,
                        };
                    }
                    financialBills(params)
                        .then((res) => {
                            this.data = res.list;
                            this.pageOptions.total = res.total;
                            resolve();
                        })
                        .catch((err) => {
                            reject(new Error(err));
                        });
                });
            },
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  background-color: #fff;
}
</style>
